<template>
    <a-modal :title="'提交记录查询'" :visible="true" width="60%" :footer="null" @cancel="reset">
        <a-table bordered :loading="loading" :columns="columns" :data-source="dataSource" :scroll="{ x: 1500 }"
            :pagination="false">
            <div v-for="(item, i) in objNameList" :key="i" :slot="item" slot-scope="txt, record">
                <span :class="changeColor(item, record[item]) ? 'red' : null">{{ record[item]
                }}</span>
            </div>
            <div v-for="(subitem, i) in objNameListOther" :key="i" :slot="subitem" slot-scope="txt, record">
                <span :class="changeColor(subitem, record.extendInfo[subitem], 1) ? 'red' : null">{{
                    record.extendInfo[subitem] }}</span>
            </div>
            <template slot="decorateAccessories" slot-scope="txt, record">
                <span :class="changeColor('decorateAccessories', record.decorateAccessories) ? 'red' : null"
                    v-if="record.decorateAccessories == 0">否</span>
                <span :class="changeColor('decorateAccessories', record.decorateAccessories) ? 'red' : null"
                    v-if="record.decorateAccessories == 1">是</span>
            </template>
            <!-- <template slot="whetherHasEnglish" slot-scope="txt, record">
                    <span :class="changeColor('whetherHasEnglish', record.whetherHasEnglish) ? 'red' : null"
                        v-if="record.whetherHasEnglish == 0">无英文</span>
                    <span :class="changeColor('whetherHasEnglish', record.whetherHasEnglish) ? 'red' : null"
                        v-if="record.whetherHasEnglish == 1">有英文</span>
                </template> -->
            <!-- <template slot="riskFlag" slot-scope="txt, record">
                <span :class="changeColor('riskFlag', record.riskFlag) ? 'red' : null"
                    v-if="record.riskFlag == 0">无风险</span>
                <span :class="changeColor('riskFlag', record.riskFlag) ? 'red' : null"
                    v-if="record.riskFlag == 1">有风险</span>
            </template>
            <template slot="risk" slot-scope="txt, record">
                <span :class="changeColor('risk', record.risk) ? 'red' : null" v-if="record.risk == 10">原创/著作问题</span>
                <span :class="changeColor('risk', record.risk) ? 'red' : null" v-if="record.risk == 20">社会和谐</span>
                <span :class="changeColor('risk', record.risk) ? 'red' : null" v-if="record.risk == 30">政治敏感</span>
                <span :class="changeColor('risk', record.risk) ? 'red' : null" v-if="record.risk == 40">文化歧视</span>
                <span :class="changeColor('risk', record.risk) ? 'red' : null" v-if="record.risk == 50">语言问题</span>
                <span :class="changeColor('risk', record.risk) ? 'red' : null" v-if="record.risk == 60">未成年问题</span>
            </template> -->
            <!-- <template slot="source" slot-scope="txt, record">
                    <span :class="changeColor('source', record.source) ? 'red' : null" v-if="record.source == 1">原创</span>
                    <span :class="changeColor('source', record.source) ? 'red' : null" v-if="record.source == 2">借鉴</span>
                    <span :class="changeColor('source', record.source) ? 'red' : null" v-if="record.source == 3">出处</span>
                </template> -->
            <template slot="cooperation" slot-scope="txt, record">
                <span :class="changeColor('cooperation', record.extendInfo.cooperation, 1) ? 'red' : null"
                    v-if="record.extendInfo.cooperation == 0">否</span>
                <span :class="changeColor('cooperation', record.extendInfo.cooperation, 1) ? 'red' : null"
                    v-if="record.extendInfo.cooperation == 1">是</span>
            </template>
            <template slot="patternAuthorization" slot-scope="txt, record">
                <span :class="changeColor('patternAuthorization', record.extendInfo.patternAuthorization, 1) ? 'red' : null"
                    v-if="record.extendInfo.patternAuthorization == 0">否</span>
                <span :class="changeColor('patternAuthorization', record.extendInfo.patternAuthorization, 1) ? 'red' : null"
                    v-if="record.extendInfo.patternAuthorization == 1">是</span>
            </template>
            <template slot="languageType" slot-scope="txt, record">
                <span :class="changeColor('languageType', record.extendInfo.languageType, 1) ? 'red' : null"
                    v-if="record.extendInfo.languageType == 10">中文</span>
                <span :class="changeColor('languageType', record.extendInfo.languageType, 1) ? 'red' : null"
                    v-if="record.extendInfo.languageType == 20">英文</span>
                <span :class="changeColor('languageType', record.extendInfo.languageType, 1) ? 'red' : null"
                    v-if="record.extendInfo.languageType == 30">法文</span>
                <span :class="changeColor('languageType', record.extendInfo.languageType, 1) ? 'red' : null"
                    v-if="record.extendInfo.languageType == 40">意大利文</span>
                <span :class="changeColor('languageType', record.extendInfo.languageType, 1) ? 'red' : null"
                    v-if="record.extendInfo.languageType == 50">其他</span>
            </template>

            <template slot="patternFlag" slot-scope="txt, record">
                <span :class="changeColor('patternFlag', record.extendInfo.patternFlag, 1) ? 'red' : null"
                    v-if="record.extendInfo.patternFlag == 0">否</span>
                <span :class="changeColor('patternFlag', record.extendInfo.patternFlag, 1) ? 'red' : null"
                    v-if="record.extendInfo.patternFlag == 1">是</span>
            </template>
            <template slot="supplyHasPatent" slot-scope="txt, record">
                <span :class="changeColor('supplyHasPatent', record.extendInfo.supplyHasPatent, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyHasPatent == 0">否</span>
                <span :class="changeColor('supplyHasPatent', record.extendInfo.supplyHasPatent, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyHasPatent == 1">是</span>
            </template>
            <template slot="supplyHasPatentFile" slot-scope="txt, record">
                <span :class="changeColor('supplyHasPatentFile', record.extendInfo.supplyHasPatentFile, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyHasPatentFile == 0">否</span>
                <span :class="changeColor('supplyHasPatentFile', record.extendInfo.supplyHasPatentFile, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyHasPatentFile == 1">是</span>
            </template>
            <template slot="supplyOriginal" slot-scope="txt, record">
                <span :class="changeColor('supplyOriginal', record.extendInfo.supplyOriginal, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyOriginal == 0">否</span>
                <span :class="changeColor('supplyOriginal', record.extendInfo.supplyOriginal, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyOriginal == 1">是</span>
            </template>
            <template slot="supplyOriginalAuthorization" slot-scope="txt, record">
                <span
                    :class="changeColor('supplyOriginalAuthorization', record.extendInfo.supplyOriginalAuthorization, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyOriginalAuthorization == 0">否</span>
                <span
                    :class="changeColor('supplyOriginalAuthorization', record.extendInfo.supplyOriginalAuthorization, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyOriginalAuthorization == 1">是</span>
            </template>
            <template slot="supplyOriginalProve" slot-scope="txt, record">
                <span :class="changeColor('supplyOriginalProve', record.extendInfo.supplyOriginalProve, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyOriginalProve == 0">否</span>
                <span :class="changeColor('supplyOriginalProve', record.extendInfo.supplyOriginalProve, 1) ? 'red' : null"
                    v-if="record.extendInfo.supplyOriginalProve == 1">是</span>
            </template>
            <template slot="wordage" slot-scope="txt, record">
                <span :class="changeColor('wordage', record.extendInfo.wordage, 1) ? 'red' : null"
                    v-if="record.extendInfo.wordage == 0">否</span>
                <span :class="changeColor('wordage', record.extendInfo.wordage, 1) ? 'red' : null"
                    v-if="record.extendInfo.wordage == 1">是</span>
            </template>
            <template slot="specialProcess" slot-scope="txt, record">
                <span :class="changeColor('specialProcess', record.extendInfo.specialProcess, 1) ? 'red' : null"
                    v-if="record.extendInfo.specialProcess == 0">否</span>
                <span :class="changeColor('specialProcess', record.extendInfo.specialProcess, 1) ? 'red' : null"
                    v-if="record.extendInfo.specialProcess == 1">是</span>
            </template>
            <template slot="typefaceSource" slot-scope="txt, record">
                <span :class="changeColor('typefaceSource', record.extendInfo.typefaceSource, 1) ? 'red' : null"
                    v-if="record.extendInfo.typefaceSource == 10">原创</span>
                <span :class="changeColor('typefaceSource', record.extendInfo.typefaceSource, 1) ? 'red' : null"
                    v-if="record.extendInfo.typefaceSource == 20">直接使用</span>
                <span :class="changeColor('typefaceSource', record.extendInfo.typefaceSource, 1) ? 'red' : null"
                    v-if="record.extendInfo.typefaceSource == 30">改动后使用</span>
            </template>
            <template slot="typefaceOrigin" slot-scope="txt, record">
                <span :class="changeColor('typefaceOrigin', record.extendInfo.typefaceOrigin, 1) ? 'red' : null"
                    v-if="record.extendInfo.typefaceOrigin == 10">免费字体</span>
                <span :class="changeColor('typefaceOrigin', record.extendInfo.typefaceOrigin, 1) ? 'red' : null"
                    v-if="record.extendInfo.typefaceOrigin == 20">授权使用</span>
                <span :class="changeColor('typefaceOrigin', record.extendInfo.typefaceOrigin, 1) ? 'red' : null"
                    v-if="record.extendInfo.typefaceOrigin == 30">其他</span>
            </template>
            <template slot="patternSource" slot-scope="txt, record">
                <span :class="changeColor('patternSource', record.extendInfo.patternSource, 1) ? 'red' : null"
                    v-if="record.extendInfo.patternSource == 10">原创</span>
                <span :class="changeColor('patternSource', record.extendInfo.patternSource, 1) ? 'red' : null"
                    v-if="record.extendInfo.patternSource == 20">设计灵感借鉴</span>
                <span :class="changeColor('patternSource', record.extendInfo.patternSource, 1) ? 'red' : null"
                    v-if="record.extendInfo.patternSource == 30">直接使用</span>
                <span :class="changeColor('patternSource', record.extendInfo.patternSource, 1) ? 'red' : null"
                    v-if="record.extendInfo.patternSource == 30">改动后使用</span>

            </template>
            <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" style="width:1500px"
                :data-source="text.colorList" :pagination="false">
                <template slot="images" slot-scope="txt, record">
                    <img v-for="item, i in record.images" :key="i" :alt="item" :src="item"
                        style="width:100px;height: 100px;object-fit: scale-down;" />
                </template>
            </a-table>
        </a-table>
    </a-modal>
</template>
  
<script>
const columns = [
{
        title: '提交时间',
        width: 220,
        dataIndex: 'createTime',

    },
    {
        title: '图案名称',
        width: 200,
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: '品牌编码',
        width: 150,
        dataIndex: 'brandCode',
        scopedSlots: { customRender: 'brandCode' },
    },
    {
        title: '图案编码',
        width: 150,
        dataIndex: 'code',
        scopedSlots: { customRender: 'code' },
    },
    {
        title: '批复id',
        width: 150,
        dataIndex: 'commentsId',
        scopedSlots: { customRender: 'commentsId' },
    },
    {
        title: '是否装饰辅料',
        width: 150,
        dataIndex: 'decorateAccessories',
        scopedSlots: { customRender: 'decorateAccessories' },

    },
    {
        title: '平面设计师id',
        width: 150,
        dataIndex: 'designerUserId',
        scopedSlots: { customRender: 'designerUserId' },

    },
    {
        title: '平面设计师名称',
        width: 150,
        dataIndex: 'designerUserName',
        scopedSlots: { customRender: 'designerUserName' },
    },
    // {
    //     title: '是否有英文',
    //     width: 150,
    //     dataIndex: 'whetherHasEnglish',
    //     scopedSlots: { customRender: 'whetherHasEnglish' },
    // },
    // {
    //     title: '英文原文',
    //     width: 150,
    //     dataIndex: 'englishOriginal',
    //     scopedSlots: { customRender: 'englishOriginal' },
    // },
    // {
    //     title: '英文解释',
    //     width: 150,
    //     dataIndex: 'englishExplain',
    //     scopedSlots: { customRender: 'englishExplain' },

    // },

    {
        title: '组名',
        width: 100,
        dataIndex: 'groupName',
        scopedSlots: { customRender: 'groupName' },

    },
    {
        title: '操作人id',
        width: 100,
        dataIndex: 'jobNumber',
        scopedSlots: { customRender: 'jobNumber' },

    },
    // {
    //     title: '图案含义',
    //     width: 250,
    //     dataIndex: 'meaning',
    //     scopedSlots: { customRender: 'meaning' },

    // },
    {
        title: '专利id',
        width: 100,
        dataIndex: 'patentId',
        scopedSlots: { customRender: 'patentId' },

    },
    {
        title: '备注',
        width: 150,
        dataIndex: 'remarks',
        scopedSlots: { customRender: 'remarks' },

    },
    // {
    //     title: '是否有风险',
    //     width: 120,
    //     dataIndex: 'riskFlag',
    //     scopedSlots: { customRender: 'riskFlag' },

    // },
    // {
    //     title: '风险',
    //     width: 100,
    //     dataIndex: 'risk',
    //     scopedSlots: { customRender: 'risk' },
    // },
    {
        title: '季节',
        width: 100,
        dataIndex: 'season',
        scopedSlots: { customRender: 'season' },

    },
    // {
    //     title: '出处',
    //     width: 100,
    //     dataIndex: 'source',
    //     scopedSlots: { customRender: 'source' },
    // },






]
const innerColumns = [
    {
        title: '颜色编码',
        dataIndex: 'code'
    },
    {
        title: '颜色名称',
        dataIndex: 'name'
    },
    {
        title: '图片',
        dataIndex: 'images',
        scopedSlots: { customRender: 'images' },

    },
]
import { postAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'

export default {
    props: {
        patternCode: {
            type: [Number, String],
            default: ''
        },
        groupName: {
            type: [Number, String],
            default: ''
        },
    },

    data() {
        return {
            columns,
            innerColumns,
            loading: false,
            objNameList: ['name', 'brandCode', 'code', 'commentsId', 'creativeCompleteDate', 'creativeCompleteLocation', 'creativeProcess', 'designerUserId', 'designerUserName', 'firstPublishDate', 'firstPublishLocation', 'groupName', 'jobNumber', 'patentId', 'remarks', 'season'],
            objNameListOther: ['moreFile', 'cooperationContractUrl', 'languageRestsExplain', 'patternAuthorizationUrl', 'patternInspiration', 'patternOrigin', 'patternOriginUrl', 'supplyInspiration', 'supplyName', 'typefaceMeaning', 'typefaceOriginProveUrl', 'typefaceOriginRestsExplain', 'typefaceOriginUrl', 'typefaceType', 'figureSource'],
            dataSource: []
        }
    },

    computed: {
        jobNumber() {
            return this.$store.getters.userInfo.workNo || ''
        }
    },

    created() {
        if (this.groupName == '设计组') {
            const newArr = [
                {
                    title: '是否合作款',
                    width: 120,
                    dataIndex: 'extendInfo.cooperation',
                    scopedSlots: { customRender: 'cooperation' },


                },
                {
                    title: '合作款合同地址',
                    width: 300,
                    dataIndex: 'extendInfo.cooperationContractUrl',
                    scopedSlots: { customRender: 'cooperationContractUrl' },

                },
                {
                    title: '是否有图案',
                    width: 120,
                    dataIndex: 'extendInfo.patternFlag',
                    scopedSlots: { customRender: 'patternFlag' },

                },
                {
                    title: '图案出处',
                    width: 150,
                    scopedSlots: { customRender: 'patternSource' },
                    dataIndex: 'extendInfo.patternSource',
                },

                {
                    title: '借鉴/原始图案',
                    width: 300,
                    dataIndex: 'extendInfo.patternOriginUrl',
                    scopedSlots: { customRender: 'patternOriginUrl' },

                },
                {
                    title: '图案来源',
                    width: 300,
                    dataIndex: 'extendInfo.patternOrigin',
                    scopedSlots: { customRender: 'patternOrigin' },

                },
                // {
                //     title: '原始图案作者',
                //     width: 150,
                //     dataIndex: 'extendInfo.patternOriginAuthor',
                //     scopedSlots: { customRender: 'patternOriginAuthor' },

                // },
                // {
                //     title: '原始图案发表方式',
                //     width: 160,
                //     dataIndex: 'extendInfo.patternOriginIssuingWay',
                //     scopedSlots: { customRender: 'patternOriginIssuingWay' },

                // },
                // {
                //     title: '原始图案发表时间',
                //     width: 150,
                //     dataIndex: 'extendInfo.patternOriginPostedTime',
                //     scopedSlots: { customRender: 'patternOriginPostedTime' },

                // },
                {
                    title: '是否有授权',
                    width: 120,
                    dataIndex: 'extendInfo.patternAuthorization',
                    scopedSlots: { customRender: 'patternAuthorization' },

                },
                {
                    title: '图案授权文件地址',
                    width: 300,
                    dataIndex: 'extendInfo.patternAuthorizationUrl',
                    scopedSlots: { customRender: 'patternAuthorizationUrl' },

                },
                {
                    title: '设计灵感说明',
                    width: 150,
                    dataIndex: 'extendInfo.patternInspiration',
                    scopedSlots: { customRender: 'patternInspiration' },

                },
                {
                    title: '是否有文字',
                    width: 150,
                    dataIndex: 'extendInfo.wordage',
                    scopedSlots: { customRender: 'wordage' },
                },
                {
                    title: '语言类型',
                    width: 100,
                    dataIndex: 'extendInfo.languageType',
                    scopedSlots: { customRender: 'languageType' },

                },
                {
                    title: '语言类型其他说明',
                    width: 150,
                    dataIndex: 'extendInfo.languageRestsExplain',
                    scopedSlots: { customRender: 'languageRestsExplain' },

                },

                {
                    title: '字体出处',
                    width: 150,
                    dataIndex: 'extendInfo.typefaceSource',
                    scopedSlots: { customRender: 'typefaceSource' },

                },

                {
                    title: '字体类型',
                    width: 150,
                    dataIndex: 'extendInfo.typefaceType',
                    scopedSlots: { customRender: 'typefaceType' },

                },
                {
                    title: '字体原始图地址',
                    width: 300,
                    dataIndex: 'extendInfo.typefaceOriginUrl',
                    scopedSlots: { customRender: 'typefaceOriginUrl' },

                },
                {
                    title: '字体来源',
                    width: 150,
                    dataIndex: 'extendInfo.typefaceOrigin',
                    scopedSlots: { customRender: 'typefaceOrigin' },

                },
                {
                    title: '字体来源证明文件地址',
                    width: 300,
                    dataIndex: 'extendInfo.typefaceOriginProveUrl',
                    scopedSlots: { customRender: 'typefaceOriginProveUrl' },

                },
                {
                    title: '字体来源其他说明',
                    width: 200,
                    dataIndex: 'extendInfo.typefaceOriginRestsExplain',
                    scopedSlots: { customRender: 'typefaceOriginRestsExplain' },

                },
                {
                    title: '文字含义',
                    width: 250,
                    dataIndex: 'extendInfo.typefaceMeaning',
                    scopedSlots: { customRender: 'typefaceMeaning' },

                },
            ]
            this.columns = this.columns.concat(newArr)

        } else if (this.groupName == '外采组') {

            const newArr = [
                {
                    title: '供应商名称',
                    width: 150,
                    dataIndex: 'extendInfo.supplyName',
                    scopedSlots: { customRender: 'supplyName' },

                },
                {
                    title: '是否涉及特殊工艺',
                    width: 150,
                    dataIndex: 'extendInfo.specialProcess',
                    scopedSlots: { customRender: 'specialProcess' },

                },
                {
                    title: '供应商是否有专利',
                    width: 150,
                    dataIndex: 'extendInfo.supplyHasPatent',
                    scopedSlots: { customRender: 'supplyHasPatent' },

                },
                {
                    title: '供应商是否有专利证明文件',
                    width: 220,
                    dataIndex: 'extendInfo.supplyHasPatentFile',
                    scopedSlots: { customRender: 'supplyHasPatentFile' },

                },
                {
                    title: '面料花纹是否供应商原创',
                    width: 250,
                    dataIndex: 'extendInfo.supplyOriginal',
                    scopedSlots: { customRender: 'supplyOriginal' },

                },
                {
                    title: '供应商是否可提供原创证明文件',
                    width: 230,
                    dataIndex: 'extendInfo.supplyOriginalProve',
                    scopedSlots: { customRender: 'supplyOriginalProve' },
                },
                {
                    title: '花纹来源',
                    width: 150,
                    dataIndex: 'extendInfo.figureSource',
                    scopedSlots: { customRender: 'figureSource' },

                },
                {
                    title: '供应商是否可提供花纹授权文件',
                    width: 240,
                    dataIndex: 'extendInfo.supplyOriginalAuthorization',
                    scopedSlots: { customRender: 'supplyOriginalAuthorization' },
                },
                {
                    title: '花纹灵感说明',
                    width: 350,
                    dataIndex: 'extendInfo.supplyInspiration',
                    scopedSlots: { customRender: 'supplyInspiration' },

                },
                {
                    title: '文件',
                    width: 300,
                    dataIndex: 'extendInfo.moreFile',
                    scopedSlots: { customRender: 'moreFile' },

                },
            ]
            this.columns = this.columns.concat(newArr)
        }
        const arr = [
            {
                title: '创作完成时间',
                width: 150,
                dataIndex: 'creativeCompleteDate',
                scopedSlots: { customRender: 'creativeCompleteDate' },

            },
            {
                title: '创作完成地点',
                width: 150,
                dataIndex: 'creativeCompleteLocation',
                scopedSlots: { customRender: 'creativeCompleteLocation' },

            },
            {
                title: '创作过程',
                width: 150,
                dataIndex: 'creativeProcess',
                scopedSlots: { customRender: 'creativeProcess' },
            },
            {
                title: '作品首次发表时间',
                width: 150,
                dataIndex: 'firstPublishDate',
                scopedSlots: { customRender: 'firstPublishDate' },

            },
            {
                title: '首次发表地点',
                width: 150,
                dataIndex: 'firstPublishLocation',
                scopedSlots: { customRender: 'firstPublishDate' },

            },
        ]
        this.columns = this.columns.concat(arr)

        this.$nextTick(() => {
            this.loadData()

        })
    },

    methods: {
        changeColor(type, value, key) {
            const newArr = []
            if (key) {
                this.dataSource.map((item) => {
                    if (item.extendInfo[type] != value) {
                        newArr.push(item.extendInfo[type])
                    }
                })
            } else {
                this.dataSource.map((item) => {
                    if (item[type] != value) {
                        newArr.push(item[type])
                    }
                })
            }
            if (newArr.length) {
                return true
            }
        },
        loadData() {
            this.loading = true
            try {
                const params = {
                    patternCode: this.patternCode,
                    size: 10,
                    current: 1
                }
                postAction(`${pattern}pattern/submit/log/page`, params).then(data => {
                    if (data.code == 200) {
                        this.dataSource = data.data.records
                    } else {
                        this.$message.warning(data.msg)
                    }
                    this.loading = false
                })
            } catch (error) {
                this.loading = false

            } finally {
                this.loading = false

            }
        },
        reset() {
            this.$emit('closeSubmit')
        }
    }
}
</script>
  
<style scoped lang="less">
.info-action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    // margin-bottom: 20px;
}

.red {
    color: red
}

.ml-20 {
    margin-left: 20px;
}
</style>
  